<template>
    <v-container>
<!--        要替换的文本-->
        <!--        原始数据数组--><!--        替换数据数组-->
<!--        分析展示原始数据数组，方便对照每一组要替换的文字--> <!--        分析展示替换数据数组，点击单元格，上方数组对应文字高亮，方便修改-->
<!--        按钮-->
<!--        结果-->
<!--        文本提示：谨慎使用：可能之前的替换引起新的组合符合后边的替换，导致替换不准确-->
        <button @click="doReplace()">替换</button>
        <copy-button :content="result"></copy-button>
    </v-container>
</template>

<script>
    import CopyButton from '@/components/CopyButton'
    export default {
        name: "ReplaceBatch",
        components: {
            CopyButton
        },
        data: () => ({
            originText: 'AU,AN,AV,AO,AW,AP,AX,AQ,AY,AR,AZ,AS,BH,BA,BI,BB,BJ,BC,BK,BD,BL,BE,BM,BF,BP,BQ,BR,BS,BT,BU,BV,BW,BN,BO',
            beforeStrings: 'AA,AB,AC,AD,AE,AF,AG,AH,AI,AJ,AK,AL,AM,AN,AO,AP,AQ,AR,AS,AT,AU,AV,AW,AX,AY,AZ,BA,BB,BC,BD,BE,BF,BG,BH,BI,BJ,BK,BL,BM,BN,BO,BP,BQ,BR,BS,BT,BU,BV,BW,BX,BY,BZ',
            afterStrings: '21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72',
            result: ''
        }),
        methods: {
            doReplace() {
                const beforeArray = this.beforeStrings.split(',');
                const afterArray = this.afterStrings.split(',');
                let afterText = this.originText;
                let reg;
                for (let i in beforeArray) {
                    // 这种方式没有检查是否前一个替换影响后一个替换，要保证每一组唯一
                    // 比如 文本：abab，原始：ab,a,b，替换：1,2,3，这种情况就会替换为11，后面两个替换在第一个替换之后就无效了
                    reg = new RegExp(beforeArray[i], 'g');
                    afterText = afterText.replace(reg, afterArray[i]);
                }
                this.result = afterText;
                console.log(this.originText, afterText);
            }
        }
    }
</script>

<style scoped>

</style>
